<template>
<div>
  <el-container>
  <el-header>
      <hr/>
      <el-row>
      <el-button v-show="ego===0" type="primary" @click="createMerchandise()">新增订单</el-button>
      <el-button  v-show="ego===0" type="success" @click="changeEgo1()">历史订单</el-button>
      <el-button v-show="ego===1" type="primary" @click="changeEgo0()">导出报表</el-button>
      <el-button v-show="ego===1" type="success" @click="changeEgo0()">全部订单</el-button>
       </el-row>
      </el-header>
      <el-main>
  <el-table v-show="ego===0"
    :data="tableData.filter(data => !search || data.uname.toLowerCase().includes(search.toLowerCase())
    || data.mname.toLowerCase().includes(search.toLowerCase())
    || data.startPlace.toLowerCase().includes(search.toLowerCase())
    || data.endPlace.toLowerCase().includes(search.toLowerCase())
    || data.containerTypeName.toLowerCase().includes(search.toLowerCase())
    ||data.cid.toString().includes(search.toLowerCase())
    ||data.cload.toString().includes(search.toLowerCase())
    ||data.volume.toString().includes(search.toLowerCase()))"
    border
    :default-sort = "{prop: 'cid', order: 'ascending'}"
    style="width: 100%">
    <el-table-column
      fixed
      label="订单号"
      prop="cid"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      label="租户名"
      prop="uname"
      width="120">
    </el-table-column>
     <el-table-column
      label="商品"
      prop="mname"
      width="120">
    </el-table-column>
     <el-table-column
      label="集装箱型号"
      prop="containerTypeName"
      width="150">
    </el-table-column>
     <el-table-column
      label="可用承重/kg"
      prop="cload"
      width="=100">
    </el-table-column>
    <el-table-column
      label="可用容积/m³"
      prop="volume"
      width="150">
    </el-table-column>
    <el-table-column
      label="泡/重货物"
      prop="isHeavy"
      width="200">
      <template slot-scope="scope">
                        <el-switch 
                            active-text="泡货"
                            inactive-text="重货"
                            on-color="#5B7BFA"
                            off-color="#dadde5"
                            :active-value="1"  
                            :inactive-value="0"
                            v-model="scope.row.isHeavy" 
                            @change=change(scope.$index,scope.row)                
                        >
                        </el-switch>
                        </template>
    </el-table-column>
     <el-table-column
      label="发货地"
      prop="startPlace"   
      width="120">
    </el-table-column>
    <el-table-column
      label="目的地"
      prop="endPlace"
      width="120">
    </el-table-column>
     <el-table-column
      label="下单时间"
      prop="startTime"
      sortable
      width="200">
    </el-table-column>
     
    <el-table-column
      fixed="right"
      align="right"
      width="300">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope" >
         <el-button 
          size="mini"
          type="success"
          @click="OrderFinish(scope.$index, scope.row)">完成订单</el-button>
        <el-button 
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">修改订单</el-button>
        <el-button 
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除订单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-table v-show="ego===1"
    :data="tableData.filter(data => !search || data.uname.toLowerCase().includes(search.toLowerCase())
    || data.mname.toLowerCase().includes(search.toLowerCase())
    || data.startPlace.toLowerCase().includes(search.toLowerCase())
    || data.endPlace.toLowerCase().includes(search.toLowerCase())
    || data.containerTypeName.toLowerCase().includes(search.toLowerCase())
    ||data.cid.toString().includes(search.toLowerCase())
    ||data.cload.toString().includes(search.toLowerCase())
    ||data.volume.toString().includes(search.toLowerCase()))"
    border
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      fixed
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="订单号"
      prop="cid"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      label="租户名"
      prop="uname"
      width="120">
    </el-table-column>
     <el-table-column
      label="商品"
      prop="mname"
      width="120">
    </el-table-column>
     <el-table-column
      label="集装箱型号"
      prop="containerTypeName"
      width="150">
    </el-table-column>
     <el-table-column
      label="可用承重/kg"
      prop="cload"
      width="=100">
    </el-table-column>
    <el-table-column
      label="可用容积/m³"
      prop="volume"
      width="150">
    </el-table-column>
    <el-table-column
      label="泡/重货物"
      prop="isHeavy"
      width="200">
      <template slot-scope="scope">
                        <el-switch 
                            active-text="泡货"
                            inactive-text="重货"
                            on-color="#5B7BFA"
                            off-color="#dadde5"
                            :active-value="1"  
                            :inactive-value="0"
                            v-model="scope.row.isHeavy" 
                            @change=change(scope.$index,scope.row)                
                        >
                        </el-switch>
                        </template>
    </el-table-column>
     <el-table-column
      label="发货地"
      prop="startPlace"   
      width="120">
    </el-table-column>
    <el-table-column
      label="目的地"
      prop="endPlace"
      width="120">
    </el-table-column>
     <el-table-column
      label="下单时间"
      sortable
      prop="startTime"
      width="200">
    </el-table-column>
     <el-table-column
      label="完单时间"
      sortable
      prop="endTime"
      width="200">
    </el-table-column>
    <el-table-column
      fixed="right"
      width="200"
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>
        </el-main>
   <el-footer>
   <div>
<el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
</div>
    </el-footer>
</el-container>
<el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="dataform"  ref="dataForm">
        <el-form-item label="租户名" prop="uname">
          <el-select v-model="Usename" clearable placeholder="请选择商品" value-key="uid" @change="getValue0">
          <el-option
            v-for="item in UData"
            :key="item.uid"
            :label="item.uname"
            :value="item">
          </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="商品名" prop="mname">
          <el-select v-model="Mername" clearable placeholder="请选择商品" value-key="mid" @change="getValue1">
          <el-option
            v-for="item in MData"
            :key="item.mid"
            :label="item.mname"
            :value="item">
          </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="集装箱型号" prop="containerTypeName">
          <el-select v-model="Conname" clearable  value-key="containerNum" placeholder="请选择集装箱型号" @change="getValue2">
          <el-option
            v-for="item in CData"
            :key="item.containerNum"
            :label="item.containerType"
            :value="item">
            <span style="float: left">{{ item.containerType }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.size }}</span>
          </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="发货地" prop="startPlace">
          <el-input v-model="dataform.startPlace" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="目的地" prop="endPlace">
          <el-input v-model="dataform.endPlace" autocomplete="off"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>

export default {
  components: {},
  props: {},
  data() {
      return {
        ego: 0,
        title:'添加订单',
        dialogVisible:false,
        multipleSelection: [],
         dataform: {
            cid: 0,
            cload:'',
            containerTypeName:'',
            containerTypenum:'',
            endPlace:'',
            isHeavy:0,
            mid:0,
            mname:'',
            startPlace:'',
            startTime:'',
            uid:'',
            uname:'',
            volume:''
        },
        tableData: {
            cid: 0,
            cload:'',
            containerTypeName:'',
            containerTypenum:'',
            endPlace:'',
            isHeavy:0,
            mid:0,
            mname:'',
            startPlace:'',
            startTime:'',
            uid:'',
            uname:'',
            volume:''
        },
        UData:{
          address:'',
            cid: [],
            email:'',
            phoneNum:'',
            uname:'',
            uid:0
        },
        Usename:'',
        Mername:'',
        Conname:'',
        MData:{
            isHeavy:0,
            mcount: 0,
            mname:'',
            standard:'',
            mid:0,
            price:''
        },
        CData:[{
          cload:'',
          containerNum:0,
          containerType:'',
          size:'',
          volume:0
        }],
        search: '',
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      }
  },

  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
     handleSelectionChange(val) {
        this.multipleSelection = val;
        console.info('multipleSelection',this.multipleSelection)
      },
    changeEgo0(){
      this.ego=0;
      this.getPage();
    },
    changeEgo1(){
      this.ego=1;
      this.getMenus();
    },
    getU(){
        this.$http({
        url: this.$http.adornUrl('/product/user/list'),
        method: 'get',
        params: this.$http.adornParams({
        })
        }).then(({ data }) => {
            console.log(data,"获取到的数据");
            if (data && data.code === 0) {
          this.UData = data.page.list;
        } else {
          this.UData = [];
        }
        })
    },
    OrderFinish(index,row){
      console.log(index,'得到的数据',row);
      this.$confirm(`确定${row.cid}号订单已完成?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http({
      url: this.$http.adornUrl(`/product/order/list/changeStatus/${row.cid}`),
      method: 'post',
      data: this.$http.adornData(row.cid, false)
      }).then(({ data }) => { 
            this.$message({
            type: 'success',
            message: '成功完成订单!'
          });
          this.getMenus();
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    },
     handleEdit(index, row) {
        this.title='修改订单';
        console.log(index, 'row是',row);
         this.getStandard ();
         this.getMer();
         this.getU();
        //this.dataform = JSON.parse(JSON.stringify(this.dataform));
        this.dataform.containerTypeName=row.containerTypeName;
        this.dataform.containerTypenum=row.containerTypenum;
        this.dataform.startPlace=row.startPlace;
        this.dataform.endPlace=row.endPlace;
        this.CData.containerType=row.containerTypeName;
        this.dataform.cid=row.cid;
        this.Usename=row.uname;
        this.Mername=row.mname;
        this.Conname=row.containerTypeName;
        this.dialogVisible=true;
       },
     handleDelete(index, row) {
        console.log(index, row,'cid为',row.cid);
        this.$confirm(`此操作将永久删除${row.cid}号订单, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http({
        url: this.$http.adornUrl(`/product/order/delete/${row.cid}`),
        method: 'post',
        data: this.$http.adornData(row.cid, false)
        }).then(({ data }) => { 
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getMenus();
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
    submitData(){
          if (this.title=='添加订单') {
              this.saveData();
          }else{
              this.updateData();
          }
      },
      updateData(){
          console.log('修改后的数据为',this.dataform);
          console.log('修改后的数据为2',this.CData);
          this.$http({
          url: this.$http.adornUrl('/product/order/updateOrder'),
          method: 'post',
          data: this.$http.adornData(this.dataform, false)
          }).then(({ data }) => { 
              this.$message({
              message: "商品修改成功",
              type: "success"
            });
            this.dialogVisible=false;
            this.getMenus();
          });
      },
    saveData(){
        console.log("提交的数据为",this.dataform);
        this.$http({
        url: this.$http.adornUrl('/product/order/saveOrder'),
        method: 'post',
        data: this.$http.adornData(this.dataform, false)
        }).then(({ data }) => { 
            this.$message({
              message: "商品保存成功",
              type: "success"
            });
            this.getPage();
            this.dialogVisible=false;
        });
    },
    getValue0(selVal){
        this.dataform.uid=selVal.uid;
        this.dataform.uname=selVal.uname;
        console.log('user数据',selVal);
    },
    getValue1(selVal){
      this.dataform.mid=selVal.mid;
      this.dataform.mname=selVal.mname;
      this.dataform.isHeavy=selVal.isHeavy;
        console.log(selVal);
    },
    getValue2(selVal){
        console.log(selVal);
        this.dataform.volume=selVal.volume;
        this.dataform.cload=selVal.cload;
        this.dataform.containerTypeName=selVal.containerType;
        this.dataform.containerTypenum=selVal.containerNum;
    },
    createMerchandise(){
        console.log("被点击了");
        this.title='添加订单';
        this.dataform.endPlace='';
        this.dataform.startPlace='';
        this.Mername='';
        this.Conname='';
        this.Usename='';
        this.getStandard ();
         this.getMer();
         this.getU();
        this.dialogVisible=true;
    },
      // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getPage();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getPage();
    },
      getMenus(){
          this.$http({
          url: this.$http.adornUrl('/product/order/list/getorder'),
          method: 'get',
          params: this.$http.adornParams({
           page: this.pageIndex,
           limit: this.pageSize,
           past:this.ego
          })
          }).then( ({data}) => {
              console.log(data,"成功获取到数据");
              if (data && data.code === 0) {
          this.tableData = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.tableData = [];
          this.totalPage = 0;
        }
          })
      },
      getMer(){
        this.$http({
        url: this.$http.adornUrl('/product/merchandise/list'),
        method: 'get',
        params: this.$http.adornParams({
        })
        }).then(({ data }) => {
            if (data && data.code === 0) {
          this.MData = data.page.list;
          
        } else {
          this.MData = [];
        }
        })
    },
        getStandard(){
        this.$http({
        url: this.$http.adornUrl('/product/standard/list'),
        method: 'get',
        params: this.$http.adornParams({
        })
        }).then(({ data }) => {
            if (data && data.code === 0) {
          console.log('获取到的集装箱数据',data)
          this.CData = data.page.list;
          console.log(this.CData);
        } else {
          this.CData = [];
        }
        })
    },
      getPage(){
          this.$http({
          url: this.$http.adornUrl('/product/order/list/getOrderPage'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
           limit: this.pageSize,
           past:this.ego
          })
          }).then( ({data}) => {
              console.log(data,"成功获取到数据");
              if (data && data.code === 0) {
          this.tableData = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.tableData = [];
          this.totalPage = 0;
        }
          })
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.getPage();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>